import { siteBySlugQuery, siteSettingsQuery } from '@automattic/api-queries';
import { useQuery, useSuspenseQuery } from '@tanstack/react-query';
import { notFound } from '@tanstack/react-router';
import { __ } from '@wordpress/i18n';
import Breadcrumbs from '../../app/breadcrumbs';
import { PageHeader } from '../../components/page-header';
import PageLayout from '../../components/page-layout';
import { canViewHundredYearPlanSettings } from '../features';
import ContactForm from './contact-form';
import LockedModeForm from './locked-mode-form';

export default function HundredYearPlanSettings( { siteSlug }: { siteSlug: string } ) {
	const { data: site } = useSuspenseQuery( siteBySlugQuery( siteSlug ) );
	const { data: settings } = useQuery( siteSettingsQuery( site.ID ) );

	if ( ! site || ! settings ) {
		return null;
	}

	if ( ! canViewHundredYearPlanSettings( site ) ) {
		throw notFound();
	}

	return (
		<PageLayout
			size="small"
			header={
				<PageHeader prefix={ <Breadcrumbs length={ 2 } /> } title={ __( 'Control your legacy' ) } />
			}
		>
			<ContactForm site={ site } settings={ settings } />
			<LockedModeForm site={ site } settings={ settings } />
		</PageLayout>
	);
}
